<template>
  <a-tooltip :placement="placement">
    <template slot="title">
      <span>{{ toolTip }}</span>
    </template>
    <a-button :shape="shape"
              :icon="icon"
              :type="type"
              :size="size"
              :loading="loading"
              :style="{'width':width,'height':height,'padding-bottom':'2px','font-size':iconSize}"
              @click="handleClick">
      {{ text }}
    </a-button>
  </a-tooltip>
</template>
<script>
export default {
  name: "BButton",
  props: {
    text: {
      type: String,
      default: "",
      required: false,
    },
    placement: {
      type: String,
      default: "top",
      required: false,
      //气泡框位置选择 top left right bottom
      // topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottom
    },
    icon: {
      type: String,
      default: "smile",
      required: false,
      // 详情查询官方文档的库
    },
    width: {
      type: String,
      default: "",
      required: false,
      // 按钮的宽度
    },
    height: {
      type: String,
      default: "",
      required: false,
      // 按钮的高度
    },
    toolTip: {
      type: String,
      default: "hello world！",
      required: false,
      // 文字提示内容
    },
    size: {
      type: String,
      default: "default",
      required: false,
      //值的选择 default large small
    },
    type: {
      type: String,
      default: "default",
      required: false,
      //值的选择 primary dashed danger link 或者不设
    },
    shape: {
      type: String,
      default: "circle",
      required: false,
      //值的选择 circle、 round
    },
    disabled: {
      type: Boolean,
      default: false,
      required: false,
      //按钮失效状态
    },
    loading: {
      type: Boolean,
      default: false,
      required: false,
      //按钮加载状态
    },
    iconSize: {
      type: String,
      default: "14px",
      required: false,
    }
  },
  data() {
    return {
      description: "带有icon以及文字提示的按钮组件",
    }
  },
  methods: {
    handleClick: function () {
      this.$emit('click');
    }
  }
}
</script>

<style scoped>

</style>